<template>
  <div class="app-container">
    <div class="filter-container">
      <el-cascader
        v-model="listQuery.cityId"
        placeholder="请选择城市"
        :options="cityData"
        :props="cityProps"
        :show-all-levels="false"
        clearable
      />
      <DictSelect
        v-model="listQuery.hide"
        placeholder="请选择是否屏蔽"
        type="hospital_hide_status"
      />
      <el-input
        v-model="listQuery.name"
        clearable
        placeholder="医院名称"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />
      <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button
        v-waves
        v-permission="['user:hospital:save']"
        type="primary"
        @click="addHospitalt"
      >添加医院
      </el-button>
    </div>
    <el-table :key="tableKey" :data="list" fit highlight-current-row style="width: 100%">
      <el-table-column label="ID" fixed prop="id" width="90px" align="center" />
      <el-table-column label="医院名称" prop="name" width="100px" align="center" />
      <el-table-column label="地址信息" prop="address" min-width="110px" align="center" />
      <el-table-column label="手机" prop="phone" width="110px" align="center" />
      <el-table-column label="屏蔽状态" prop="hideDescribe" align="center" width="100" />
      <el-table-column label="创建时间" prop="createdAt" width="155px" align="center" />
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="scope">
          <el-button
            v-permission="['user:hospital:update']"
            type="primary"
            size="mini"
            @click="record(scope.row)"
          >编辑信息
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :title="dialogHospitaltTitle"
      :visible.sync="dialogTableVisible"
      width="80%"
      top="2vh"
    >
      <el-form
        ref="dataForm"
        :model="hospital"
        :rules="rules"
        label-position="right"
        label-width="130px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="医院名称" prop="name">
              <el-input
                v-model="hospital.name"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="hospital.phone"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所在城市" prop="cityId">
              <el-cascader
                v-model="hospital.cityId"
                :options="cityData"
                :props="cityProps"
                :show-all-levels="false"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址信息" prop="address">
              <el-input
                v-model="hospital.address"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="级别">
              <el-input
                v-model="hospital.level"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特色专科">
              <el-input
                v-model="hospital.specDepartment"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主要设备">
              <el-input
                v-model="hospital.equipment"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网址">
              <el-input
                v-model="hospital.website"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="巴士路线">
              <el-input
                v-model="hospital.busRoute"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="等级类型">
              <DictSelect
                v-model="hospital.levelType"
                placeholder="请选择"
                type="hospital_level_type"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否屏蔽" prop="hide">
              <DictSelect
                v-model="hospital.hide"
                placeholder="请选择"
                type="hospital_hide_status"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" style="text-align: center;">
            <el-button
              v-waves
              v-permission="['user:hospital:save']"
              type="primary"
              @click="submit('dataForm')"
            >提交
            </el-button>
            <el-button v-waves type="primary" @click="close">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCityList
} from '@/api/user/pharmacist'
import {
  getList,
  updateHospital,
  addHospital
} from '@/api/baseConfig/index'

import waves from '@/directive/waves' // Waves directive
import DictSelect from '@/components/DictSelect'

export default {
  name: 'DoctorTable',
  directives: { waves },
  filters: {},
  components: {
    DictSelect
  },
  data() {
    return {
      dialogTableVisible: false,
      dialogHospitaltTitle: '医院详情',
      tableKey: 0,
      list: null,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        orderByField: 'id',
        orderBy: 'desc'
      },
      dialogFormVisible: false,
      dialogStatus: '',
      hospital: {
        id: null,
        name: '',
        phone: '',
        address: '',
        cityId: 0,
        level: '',
        specDepartment: '',
        equipment: '',
        website: '',
        busRoute: '',
        levelType: ''
      },
      levelList: [{ name: '无', code: 0 }],
      authStatusArr: ['正常', '屏蔽'],
      cityData: null,
      cityProps: {
        value: 'id',
        emitPath: false,
        label: 'name'
      },
      rules: {
        name: [{ required: true, message: '请输入医院姓名', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址信息', trigger: 'blur' }],
        cityId: [{ required: true, message: '请输入所在城市', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入医院手机号', trigger: 'blur' }],
        hide: [{ required: true, message: '请选择是否屏蔽', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.handleFilter()
    this.getCityList()
  },
  methods: {
    // 获取数据
    getList() {
      getList(this.listQuery).then(response => {
        this.list = response.list
        this.total = response.totalCount
      })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    resetTemp() {
      this.$nextTick(() => {
        const files = document.querySelectorAll('.imgfile')
        if (files.length > 0) {
          for (let i = 0; i < files.length; i++) {
            files[i].value = null
          }
        }
        this.$refs['dataForm'].clearValidate()
      })
    },
    addHospitalt() {
      this.hospital.id = null
      this.dialogHospitaltTitle = '添加医院'
      this.dialogTableVisible = true
      this.resetTemp()
      this.hospital = {}
    },
    submit(dataForm) {
      const that = this
      console.log(that.$refs[dataForm])
      that.$refs[dataForm].validate(valid => {
        console.log('valid', valid)
        if (valid) {
          const params = that.hospital
          delete params.sex
          delete params.birth
          if (that.hospital.id) {
            updateHospital(params, that.hospital.id).then(res => {
              that.getList()
              that.dialogTableVisible = false
            })
          } else {
            addHospital(params).then(res => {
              that.getList()
              that.dialogTableVisible = false
            })
          }
        }
      })
    },
    close() {
      const that = this
      that.dialogTableVisible = false
    },
    record(item) {
      this.dialogHospitaltTitle = '编辑医院'
      this.dialogTableVisible = true
      this.resetTemp()
      this.hospital = Object.assign({}, item)
    },
    getCityList() {
      getCityList().then(response => {
        this.cityData = response
      })
    }
  }
}
</script>
